<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="栏目名称" prop="menu_name">
            <el-input
              v-model="queryParams.menu_name"
              placeholder="请输入栏目名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div class="rightBox">
          <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
        </div>
      </el-col>
    </el-row>


    <el-table v-loading="loading" :data="list" border row-key="menu_id" :default-expand-all="isExpandAll"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="栏目名称" align="center" prop="menu_name" />
      <el-table-column label="栏目图片" align="center" prop="menu_url" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.menu_url != ''">{{scope.row.menu_url}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="显示形式" align="center" prop="menu_type" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.menu_type" :value="scope.row.menu_type"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
        <menuForm v-if="open" :keyValue="keyValue" @showList="showList" @closeDiag="open = false"></menuForm>
    </el-dialog>

  </div>
</template>

<script>
    import { listMenu, delMenu } from '@/api/base/menu';
    import menuForm from "./form";
    export default {
        name: "index",
        components: {
          menuForm
        },
        dicts: ['menu_type'],
        data() {
          return{
            loading: false,
            open: false,
            isExpandAll: true,
            keyValue: '',
            list: [],
            total: '',
            title: '添加栏目',
            queryParams:{
              menu_name: '',
            }
          }
        },
        mounted() {
          this.getList();
        },
        methods: {
          getList() {
            listMenu(this.queryParams).then(res=>{
                this.list = this.handleTree(res.data, "menu_id");
            });
          },
          handleUpdate(val) {
            this.keyValue = val.menu_id;
            this.open = true;
          },
          handleDelete(val) {
            this.$modal.confirm('是否确认删除吗？').then(function() {
              return delMenu(val.menu_id);
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
          },
          handleAdd() {
            this.keyValue = null;
            this.open = true;
          },
          showList() {
            this.open = false;
            this.getList();
          },
          handleSelectionChange(val) {

          },
          handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
          }
        }
    }
</script>

<style scoped>

</style>
